<template>
  <div ref="index2" style="width: 100%; height: 380px"></div>
</template>

<script>
import * as echarts from "echarts";
import { banShow6 } from "@/api/charts";

export default {
  mounted() {
    this.drawline();
  },
  methods: {
    drawline() {
      banShow6()
        .then(({ data }) => {
          var chartDom = this.$refs.index2;
          var myChart = echarts.init(chartDom);
          var option;
         let sum = 0;
        for (let i = 0; i < data.length; i++) {
        sum += data[i].value;
        }
          data.push({
                    // make an record to fill the bottom 50%
                    value: sum,
                    itemStyle: {
                      // stop the chart from rendering this piece
                      color: "none",
                      decal: {
                        symbol: "none",
                      },
                    },
                    label: {
                      show: false,
                    },
                  },)
          option = {
            title: {
              text: "治理成本",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              top: "5%",
              left: "center",
              // doesn't perfectly work with our tricks, disable it
              selectedMode: false,
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                center: ["50%", "70%"],
                // adjust the start angle
                startAngle: 180,
                label: {
                  show: true,
                  formatter(param) {
                    // correct the percentage
                    return param.name + " (" + param.percent * 2 + "%)";
                  },
                },
                data
              },
            ],
          };

          option && myChart.setOption(option);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
</style>